<template>
  <el-form class="add-salary-form" label-position="top">
    <!-- 标题区域 -->
    <div class="form-title">
      <h2>添加薪酬信息</h2>
      <p class="tip">请填写准确的薪酬信息，帮助建立更好的行业薪酬数据库</p>
    </div>
    
    <!-- 图一内容：基本信息和薪酬信息 -->
    <el-row :gutter="20"  class="equal-height-cols">
      <!-- 基本信息区域 -->
      <el-col :span="12">
        <el-card class="form-section">
          <div class="section-title">
            <span class="icon">$</span> 基本信息
          </div>
           <!-- <el-form-item label="标题 *">
            <el-input v-model="salaryData.title" placeholder="请输入标题" />
          </el-form-item> -->
          <el-form-item label="公司名称 *">
            <el-select 
              v-model="selectedCompany" 
              placeholder="请选择公司名称" 
              style="width: 100%"
              filterable
              remote
              :remote-method="fetchCompanies"
              :loading="companyLoading"
             
            >
              <el-option
                v-for="item in companyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          
         <el-form-item label="岗位名称 *">
            <el-select 
              v-model="jobTitle" 
              placeholder="请选择岗位名称" 
              style="width: 100%"
              filterable
              :loading="jobCategoriesLoading"
              @change="handleJobChangeWrapper"
            >
              <el-option
                v-for="item in jobCategories"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-row >
            <el-col >
              <el-form-item label="职级 *">
                <el-select 
                  v-model="salaryData.level_id" 
                  placeholder="请选择职级" 
                  style="width: 100%"
                  :loading="levelLoading"
                  :disabled="!selectedCompany"
                >
                  <el-option
                    v-for="item in levelOptions"
                    :key="item.id"
                    :label="item.level_code"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
           
          </el-row>

       <!-- 修改后的工作方向区域 -->
          <el-form-item label="工作方向 *">
            <div class="work-direction-container">
              <!-- 提示文字 -->
              <div class="direction-prompt">工作方向 - 点击选择</div>
              
              <!-- 标签选择区域 -->
              <div class="direction-tags-container">
                <!-- 预定义标签 -->
                <div class="direction-tags-row" v-for="(row, rowIndex) in chunkedFocusOptions" :key="'predefined-' + rowIndex">
                  <el-tag
                    v-for="tag in row"
                    :key="tag"
                    class="direction-tag"
                    :class="{ 'direction-tag-selected': selectedFocus.includes(tag) }"
                    @click="toggleFocusTag(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                
                <!-- 自定义标签显示区域 -->
                <div class="direction-tags-row" v-if="customFocusTags.length > 0">
                  <el-tag
                    v-for="tag in customFocusTags"
                    :key="tag"
                    class="direction-tag"
                    :class="{ 'direction-tag-selected': selectedFocus.includes(tag) }"
                    closable
                    @click="toggleFocusTag(tag)"
                    @close="removeCustomFocusTag(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                
                <!-- 添加自定义工作方向的输入区域 -->
                <div class="direction-add-container">
                  <el-input 
                    v-model="customFocusInput" 
                    placeholder="输入自定义工作方向" 
                    class="direction-input"
                    @keyup.enter="addCustomFocus"
                    @input="onCustomFocusInput"
                  />
                  <el-button 
                    type="primary" 
                    class="direction-add-btn" 
                    @click="addCustomFocus"
                    :disabled="!customFocusInput.trim()"
                  >
                    添加
                  </el-button>
                </div>
              </div>
              
              <!-- 已选标签显示区域 -->
              <div class="selected-tags-container" v-if="selectedFocus.length > 0">
                <div class="selected-tags-label">已选择的工作方向：</div>
                <div class="selected-tags">
                  <el-tag
                    v-for="tag in selectedFocus"
                    :key="tag"
                    class="selected-tag"
                    closable
                    @close="removeFocus(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-form-item>


           <el-form-item label="所在地区 *">
            <el-select 
              v-model="salaryData.location" 
              placeholder="请选择所在地区" 
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="province in provinces"
                :key="province.code"
                :label="province.name"
                :value="province.name"
              />
            </el-select>
          </el-form-item>
        </el-card>
      </el-col>
      

      <!-- 薪酬信息区域 -->
      <el-col :span="12">
        <el-card class="form-section">
          <div class="section-title">
            <span class="icon">E</span> 薪酬信息
          </div>
          
          <el-form-item label="月薪（税前） *">
            <div class="slider-value">{{ monthlySalaryInput > 0 ? monthlySalaryInput : monthlySalary }}万元</div>
         
            <el-slider v-model="monthlySalary" :min="0.3" :max="8" :step="0.1"  />
            <div class="slider-range">
              <span>0</span>~
              <span>8万</span>
            </div>
            <div class="check-icon"> 
              
               <el-input-number 
              v-model="monthlySalaryInput"           
              controls-position="right"        
            />
             <div>万元</div> 
             </div>
          </el-form-item>

           <el-form-item label="几薪 *">
            <div class="slider-value">{{ monthlyMultiplierInput > 0 ? monthlyMultiplierInput : monthlyMultiplier }}薪</div>
           
            <el-slider v-model="monthlyMultiplier" :min="12" :max="20" :step="1"  />
            <div class="slider-range">
              <span>12</span>~
              <span>20薪</span>
            </div>
             <div class="check-icon"> 
              
               <el-input-number 
                v-model="monthlyMultiplierInput"           
                controls-position="right"
                :min="12"
                :max="20"
                :step="1"
            />
             <div>薪</div> 
             </div>
          </el-form-item>
          
          <el-form-item label="年终奖金 *">
            <div class="slider-value">{{ bonusInput > 0 ? bonusInput : bonus }}万元</div>
           
            <el-slider v-model="bonus" :min="0" :max="100" :step="1"  />
            <div class="slider-range">
              <span>0</span>~
              <span>100万</span>
            </div>
             <div class="check-icon"> 
              
               <el-input-number 
                v-model="bonusInput"           
                controls-position="right"        
            />
             <div>万元</div> 
             </div>
          </el-form-item>
          
          <el-form-item label="股票期权 *">
            <div class="slider-value">{{ stockInput > 0 ? stockInput : stock }}万元</div>
            
            <el-slider v-model="stock" :min="0" :max="100" :step="1"  />
            <div class="slider-range">
              <span>0</span>~
              <span>100万</span>
            </div>
             <div class="check-icon"> 
               
               <el-input-number 
              v-model="stockInput"           
              controls-position="right"        
            />
             <div>万元</div> 
             </div>
          </el-form-item>
          
          <!-- <el-form-item label="薪酬类别 *">
            <el-select v-model="salaryData.hire_type" placeholder="请选择薪酬类别" style="width: 100%">
              <el-option label="技术类" value="tech" />
              <el-option label="管理类" value="management" />
              <el-option label="销售类" value="sales" />
            </el-select>
          </el-form-item> -->
        </el-card>
      </el-col>

    </el-row>
    
    <!-- 图二内容：个人背景和技术栈 -->
       <el-card class="form-section">
      <div class="section-title">
        <span class="icon">O</span> 个人背景
      </div>
      
      <el-row :gutter="20">
        <!-- 左列 -->
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工作年限 *">
                <el-select v-model="salaryData.year_of_experience" placeholder="请选择工作年限">
                  <el-option v-for="n in 30" :key="n" :label="`${n}年`" :value="n" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历 *">
                <el-select v-model="salaryData.degree" placeholder="请选择学历">
                  <el-option label="大专" value="college" />
                  <el-option label="本科" value="bachelor" />
                  <el-option label="硕士" value="master" />
                  <el-option label="博士" value="phd" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <!-- 根据学历选择显示不同的学校输入框 -->
          <template v-if="salaryData.degree === 'college'">
            <el-form-item label="大专学校">
              <el-input v-model="salaryData.bachelor_school" placeholder="请输入大专学校" />
            </el-form-item>
          </template>
          
          <template v-else-if="salaryData.degree === 'bachelor'">
            <el-form-item label="本科学校">
              <el-input v-model="salaryData.bachelor_school" placeholder="请输入本科学校" />
            </el-form-item>
          </template>
          
          <template v-else-if="salaryData.degree === 'master' || salaryData.degree === 'phd'">
            <el-form-item label="本科学校">
              <el-input v-model="salaryData.bachelor_school" placeholder="请输入本科学校" />
            </el-form-item>
            
            <el-form-item label="研究生学校">
              <el-input v-model="salaryData.advanced_school" placeholder="请输入研究生学校" />
            </el-form-item>
          </template>
          
          <el-form-item label="性别">
            <el-select v-model="gender" placeholder="请选择性别">
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
        </el-col>
        
        <!-- 右列 -->
        <el-col :span="12">
          <el-form-item label="每周工作小时 *">
            <el-input-number v-model="salaryData.hour_per_week" :min="10" :max="80" />
            <span class="hours-text">小时</span>
          </el-form-item>
        </el-col>
      </el-row>
      
   
      <!-- 技术栈区域 -->
      <div class="other-section">
        <div class="subtitle">其他信息</div>
        
        <el-form-item label="技术栈 ">
          <div class="tech-stack-container">
            <!-- 提示文字 -->
            <div class="tech-prompt">技术栈 - 点击选择</div>
            
            <!-- 标签选择区域 -->
            <div class="tech-tags-container">
              <!-- 预定义标签 -->
              <div class="tech-tags-row" v-for="(row, rowIndex) in chunkedTechOptions" :key="'predefined-' + rowIndex">
                <el-tag
                  v-for="tag in row"
                  :key="tag"
                  class="tech-tag"
                  :class="{ 'tech-tag-selected': selectedTech.includes(tag) }"
                  @click="toggleTechTag(tag)"
                >
                  {{ tag }}
                </el-tag>
              </div>
              
              <!-- 自定义标签显示区域 -->
              <div class="tech-tags-row" v-if="customTechTags.length > 0">
                <el-tag
                  v-for="tag in customTechTags"
                  :key="tag"
                  class="tech-tag"
                  :class="{ 'tech-tag-selected': selectedTech.includes(tag) }"
                  closable
                  @click="toggleTechTag(tag)"
                  @close="removeCustomTechTag(tag)"
                >
                  {{ tag }}
                </el-tag>
              </div>
              
              <!-- 添加自定义技术栈的输入区域 -->
              <div class="tech-add-container">
                <el-input 
                  v-model="customTechInput" 
                  placeholder="输入自定义技术栈" 
                  class="tech-input"
                  @keyup.enter="addCustomTechStack"
                  @input="onCustomTechInput"
                />
                <el-button 
                  type="primary" 
                  class="tech-add-btn" 
                  @click="addCustomTechStack"
                  :disabled="!customTechInput.trim()"
                >
                  添加
                </el-button>
              </div>
            </div>
            
            <!-- 已选标签显示区域 -->
            <div class="selected-tags-container" v-if="selectedTech.length > 0">
              <div class="selected-tags-label">已选择的技术栈：</div>
              <div class="selected-tags">
                <el-tag
                  v-for="tag in selectedTech"
                  :key="tag"
                  class="selected-tag"
                  closable
                  @close="removeTech(tag)"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>

      
      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button @click="cancelSubmit">取消</el-button>
        <el-button type="primary" @click="submitSalary" :loading="submitLoading">提交薪酬信息</el-button>
      </div>
    </el-card>
  </el-form>

  <!-- 在模板的底部添加感谢弹窗 -->
<el-dialog
  v-model="showThankYouModal"
  width="800px"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  @close="closeThankYouModal"
>
  <div class="thank-you-modal">
    <div class="modal-header">
      <h3>感谢你的分享！</h3>
    </div>
    <div class="modal-body">
      <p class="message">"你提交的薪酬信息已成功收录，帮助了更多同行了解行业真相！</p>
      <p class="description">注册账号后，你的数据会绑定个人主页，还能查看详细行业报告、对比自己的竞争力哦~</p>
    </div>
    <div class="modal-footer">
      <el-button type="primary" @click="handleRegisterClick">立即注册</el-button>
      <el-button @click="closeThankYouModal">稍后再说</el-button>
    </div>
  </div>
</el-dialog>
</template>


<script setup>
import { ref, reactive, onMounted,computed ,watch } from 'vue';
import { ElMessage } from 'element-plus';
import { SalariesdataApi, CampatydataApi, userApi ,JobApi } from '@/utils/api';
import regionData from '@/assets/region-data.json';
import { useRouter } from 'vue-router';
const router = useRouter();

// 薪酬数据
const monthlySalary = ref(2);
const monthlySalaryInput = ref(2);
const monthlyMultiplier = ref(12);
const monthlyMultiplierInput = ref(12);
const bonusInput = ref(50);
const stockInput = ref(20);
const bonus = ref(50);
const stock = ref(20);
const jobTitle = ref('');
const jobId = ref(''); // 新增：用于存储选中的岗位ID
const showThankYouModal = ref(false);


const gender = ref('');
const selectedCompany = ref(''); // 新增：用于存储选中的公司ID

// 职位分类相关数据
const jobCategories = ref([]);
const jobCategoriesLoading = ref(false);

// 公司和职级相关数据
const companyOptions = ref([]);
const levelOptions = ref([]);
const companyLoading = ref(false);
const levelLoading = ref(false);

// 提交加载状态
const submitLoading = ref(false);

// 工作方向选项（与图片一致）
const focusOptions = ref([
  '安卓', '移动端', '前端', '后端', '机器学习','人工智能',
  '算法', '分布式', '全栈', '网络', '测试', '中间件',
  '数据库', '云计算', '系统架构', '并行计算', '大数据', '其他'
]);

// 自定义工作方向相关数据
const selectedFocus = ref([]);
const customFocusInput = ref('');
const customFocusTags = ref([]); // 存储用户自定义的标签

// 计算属性：将工作方向选项分块显示（每行显示5个）
const chunkedFocusOptions = computed(() => {
  const chunks = [];
  const itemsPerRow = 5;
  
  for (let i = 0; i < focusOptions.value.length; i += itemsPerRow) {
    chunks.push(focusOptions.value.slice(i, i + itemsPerRow));
  }
  
  return chunks;
});

// 切换工作方向标签的选择状态
const toggleFocusTag = (tag) => {
  const index = selectedFocus.value.indexOf(tag);
  if (index > -1) {
    selectedFocus.value.splice(index, 1);
  } else {
    selectedFocus.value.push(tag);
  }
};

// 移除工作方向标签
const removeFocus = (tag) => {
  const index = selectedFocus.value.indexOf(tag);
  if (index > -1) {
    selectedFocus.value.splice(index, 1);
  }
};

// 移除自定义工作方向标签
const removeCustomFocusTag = (tag) => {
  // 从自定义标签列表中移除
  const customIndex = customFocusTags.value.indexOf(tag);
  if (customIndex > -1) {
    customFocusTags.value.splice(customIndex, 1);
  }
  
  // 从已选标签中移除
  removeFocus(tag);
};

// 自定义工作方向输入处理
const onCustomFocusInput = () => {
  // 可以在这里添加输入验证
};

// 添加自定义工作方向
const addCustomFocus = () => {
  const trimmedValue = customFocusInput.value.trim();
  
  if (!trimmedValue) {
    ElMessage.warning('请输入工作方向');
    return;
  }
  
  // 检查是否已存在（包括预定义和自定义的）
  const allTags = [...focusOptions.value, ...customFocusTags.value];
  if (allTags.includes(trimmedValue)) {
    ElMessage.warning('该工作方向已存在');
    return;
  }
  
  // 添加到自定义标签列表
  if (!customFocusTags.value.includes(trimmedValue)) {
    customFocusTags.value.push(trimmedValue);
  }
  
  // 自动选中新添加的标签
  if (!selectedFocus.value.includes(trimmedValue)) {
    selectedFocus.value.push(trimmedValue);
  }
  
  // 清空输入框
  customFocusInput.value = '';
  
  ElMessage.success('自定义工作方向添加成功');
};




// 技术栈选项
const techOptions = ref([
  'Python', 'Java', 'Go', 'TypeScript', 
  'MySQL', 'Redis', 'Docker', 'Kubernetes', 'AWS',
  'JavaScript', 'React', 'Vue', 'Angular', 'Node.js',
  'Spring', 'Hibernate', 'MongoDB', 'PostgreSQL'
]);

// 自定义技术栈相关数据
const selectedTech = ref([]);
const customTechInput = ref('');
const customTechTags = ref([]); // 存储用户自定义的技术栈标签

// 计算属性：将技术栈选项分块显示（每行显示5个）
const chunkedTechOptions = computed(() => {
  const chunks = [];
  const itemsPerRow = 8;
  
  for (let i = 0; i < techOptions.value.length; i += itemsPerRow) {
    chunks.push(techOptions.value.slice(i, i + itemsPerRow));
  }
  
  return chunks;
});

// 切换技术栈标签的选择状态
const toggleTechTag = (tag) => {
  const index = selectedTech.value.indexOf(tag);
  if (index > -1) {
    selectedTech.value.splice(index, 1);
  } else {
    selectedTech.value.push(tag);
  }
};

// 移除技术栈标签
const removeTech = (tag) => {
  const index = selectedTech.value.indexOf(tag);
  if (index > -1) {
    selectedTech.value.splice(index, 1);
  }
};

// 移除自定义技术栈标签
const removeCustomTechTag = (tag) => {
  // 从自定义标签列表中移除
  const customIndex = customTechTags.value.indexOf(tag);
  if (customIndex > -1) {
    customTechTags.value.splice(customIndex, 1);
  }
  
  // 从已选标签中移除
  removeTech(tag);
};

// 自定义技术栈输入处理
const onCustomTechInput = () => {
  // 可以在这里添加输入验证
};

// 添加自定义技术栈
const addCustomTechStack = () => {
  const trimmedValue = customTechInput.value.trim();
  
  if (!trimmedValue) {
    ElMessage.warning('请输入技术栈');
    return;
  }
  
  // 检查是否已存在（包括预定义和自定义的）
  const allTags = [...techOptions.value, ...customTechTags.value];
  if (allTags.includes(trimmedValue)) {
    ElMessage.warning('该技术栈已存在');
    return;
  }
  
  // 添加到自定义标签列表
  if (!customTechTags.value.includes(trimmedValue)) {
    customTechTags.value.push(trimmedValue);
  }
  
  // 自动选中新添加的标签
  if (!selectedTech.value.includes(trimmedValue)) {
    selectedTech.value.push(trimmedValue);
  }
  
  // 清空输入框
  customTechInput.value = '';
  
  ElMessage.success('自定义技术栈添加成功');
};


// 薪酬数据对象
const salaryData = reactive({
 
  department: '', // 公司名称
  tech_stacks: [],
  focuses: [],
  hire_type: '',
  country: '中国',
  location: '',
  hour_per_week: 40,
  base_comp: 0,
  base_monthly_comp: 0,
  base_monthly_comp_multiplier: 0,
  bonus_comp: 0,
  bonus_comp_multiplier: 0,
  stock_comp: 0,
  annual_stock_num: 0,
  total_comp: 0,
  year_in_company: 0,
  year_of_experience: 1,
  degree: '',
  bachelor_school: '',
  advanced_school: '',
  currency_code: 'CNY',
  is_anonymous: false,
  is_current: true,
  position_id: "",
  company_id: "", // 公司ID
  level_id: "",
  
});



// 省份数据
const provinces = ref([]);

// 页面加载时获取公司列表和用户信息
onMounted(() => {
  fetchCompanies();
  fetchUserInfo();
  fetchJobCategories();
   // 初始化省份数据
  initProvinces();
});

// 获取职位分类
const fetchJobCategories = async () => {
  jobCategoriesLoading.value = true;
  try {
    const response = await JobApi.getITCategories();
    jobCategories.value = response.data || response;
  } catch (error) {
    ElMessage.error('获取职位分类失败: ' + (error.message || '未知错误'));
    console.error('获取职位分类失败:', error);
  } finally {
    jobCategoriesLoading.value = false;
  }
};

// 初始化省份数据
const initProvinces = () => {
  provinces.value = regionData.map(province => ({
    code: province.code,
    name: province.name
  }));
};

// ... existing code ...
// 获取当前登录用户信息
const fetchUserInfo = async () => {
  // 检查是否有token再尝试获取用户信息
  const token = localStorage.getItem('ACCESS_TOKEN');
  if (!token) {
    // 如果没有token，使用默认的匿名用户ID
    
    return;
  }
  
  try {
    const response = await userApi.getUserInfo();
    const userInfo = response.data || response;
    salaryData.user_id = userInfo.id || "";
  } catch (error) {
    ElMessage.error('获取用户信息失败: ' + (error.message || '未知错误'));
    console.error('获取用户信息失败:', error);
    // 出错时使用默认用户ID
    salaryData.user_id = "";
  }
};
// ... existing code ...

// 获取公司列表
const fetchCompanies = async (query = '') => {
  companyLoading.value = true;
  try {
    const response = await CampatydataApi.getCampatyDataList();
    companyOptions.value = response.data || response;
  } catch (error) {
    ElMessage.error('获取公司列表失败: ' + (error.message || '未知错误'));
    console.error('获取公司列表失败:', error);
  } finally {
    companyLoading.value = false;
  }
};


// 处理岗位选择变化的包装函数
const handleJobChangeWrapper = async (jobId) => {
  // 设置 position_id
  salaryData.position_id = jobId;
  // 在这里可以获得选中的岗位ID，将其传递给handleJobChange方法
  // 同时需要传递公司ID，从selectedCompany获取
  await handleJobChange(selectedCompany.value, jobId);
};

// 处理岗位选择变化
const handleJobChange = async (companyId,jobId) => {
  if (!companyId) {
    levelOptions.value = [];
    salaryData.level_id = "";
    salaryData.company_id = "";
    return;
  }
  
  // 设置公司ID
  salaryData.company_id = companyId;
  
  levelLoading.value = true;
  try {
    const response = await CampatydataApi.getLevelsByCompanyId(companyId,jobId);
    levelOptions.value = response.data || response;
    salaryData.level_id = "";
  } catch (error) {
    ElMessage.error('获取职级列表失败: ' + (error.message || '未知错误'));
    console.error('获取职级列表失败:', error);
  } finally {
    levelLoading.value = false;
  }
};

// 提交薪酬信息
const submitSalary = async () => {
  try {
    submitLoading.value = true;
    // 更新薪酬数据对象
    const submitData = { ...salaryData };
    // 设置实际提交的数据
    submitData.tech_stacks = selectedTech.value;
    submitData.focuses = selectedFocus.value;
    // submitData.base_monthly_comp = baseMonthlyComp;
    submitData.base_monthly_comp_multiplier = monthlyMultiplier.value;
    submitData.bonus_comp = bonus.value * 10000; // 转换为元
    submitData.stock_comp = stock.value * 10000; // 转换为元
    // submitData.total_comp = baseMonthlyComp * 12 + bonusComp + stockComp;

    // 设置公司名称（根据选中的公司ID查找公司名称）
    const selectedCompanyObj = companyOptions.value.find(company => company.id === selectedCompany.value);
    if (selectedCompanyObj) {
      submitData.department = selectedCompanyObj.name;
    }

    // 发送POST请求
    const response = await SalariesdataApi.submitSalary(submitData);
    ElMessage.success('薪酬信息提交成功！');
    console.log('提交成功:', response);
     // 显示感谢弹窗
    showThankYouModal.value = true;
  } catch (error) {
    ElMessage.error('提交失败: ' + (error.message || '未知错误'));
    console.error('提交失败:', error);
  } finally {
    submitLoading.value = false;
  }
};

// 关闭感谢弹窗
const closeThankYouModal = () => {
  showThankYouModal.value = false;
};

// 立即注册按钮点击事件
const handleRegisterClick = () => {
  showThankYouModal.value = false;
  router.push('/register');
};

// 取消提交
const cancelSubmit = () => {
  // 这里可以添加确认对话框
  ElMessage.info('已取消提交');
};

// 监听 monthlySalaryInput 的变化
watch(monthlySalaryInput, (newValue) => {
  if (newValue > 8) {
    monthlySalary.value = 8;
  } else {
    monthlySalary.value = newValue;
  }
});

// 监听 monthlySalary 的变化，保持两个值的同步
watch(monthlySalary, (newValue) => {
  if (monthlySalaryInput.value <= 8) {
    monthlySalaryInput.value = newValue;
  }
});

// 监听 bonusInput 的变化
watch(bonusInput, (newValue) => {
  if (newValue > 100) {
    bonus.value = 100;
  } else {
    bonus.value = newValue;
  }
});

// 监听 bonus 的变化，保持两个值的同步
watch(bonus, (newValue) => {
  if (bonusInput.value <= 100) {
    bonusInput.value = newValue;
  }
});

// 监听 stockInput 的变化
watch(stockInput, (newValue) => {
  if (newValue > 100) {
    stock.value = 100;
  } else {
    stock.value = newValue;
  }
});

// 监听 stock 的变化，保持两个值的同步
watch(stock, (newValue) => {
  if (stockInput.value <= 100) {
    stockInput.value = newValue;
  }
});

// 监听 monthlySalaryInput 的变化
watch(monthlySalaryInput, (newValue) => {
  if (newValue > 8) {
    monthlySalary.value = 8;
  } else {
    monthlySalary.value = newValue;
  }
});

// 监听 monthlySalary 的变化，保持两个值的同步
watch(monthlySalary, (newValue) => {
  if (monthlySalaryInput.value <= 8) {
    monthlySalaryInput.value = newValue;
  }
});

// 监听 monthlyMultiplierInput 的变化
watch(monthlyMultiplierInput, (newValue) => {
  if (newValue > 20) {
    monthlyMultiplier.value = 20;
  } else if (newValue < 12) {
    monthlyMultiplier.value = 12;
  } else {
    monthlyMultiplier.value = newValue;
  }
});

// 监听 monthlyMultiplier 的变化，保持两个值的同步
watch(monthlyMultiplier, (newValue) => {
  if (monthlyMultiplierInput.value <= 20 && monthlyMultiplierInput.value >= 12) {
    monthlyMultiplierInput.value = newValue;
  }
});


</script>


<style scoped>
.add-salary-form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.form-title {
  margin-bottom: 25px;
}

.form-title h2 {
  margin-bottom: 10px;
  color: #303133;
}

.tip {
  color: #909399;
  font-size: 14px;
}

.form-section {
  margin-bottom: 20px;
  border-radius: 4px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: #f0f7ff;
  border-radius: 4px;
  margin-right: 8px;
  color: #409EFF;
}

/* 工作方向样式优化 */
.work-direction-container {
  width: 100%;
}

.direction-prompt {
  color: #909399;
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.direction-tags-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.direction-tags-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.direction-tag {
  flex: 1;
  min-width: 80px;
  max-width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  color: #606266;
  transition: all 0.3s ease;
  font-size: 14px;
  margin: 2px;
  text-align: center;
}

.direction-tag:hover {
  border-color: #c0c4cc;
  background-color: #f0f2f5;
}

.direction-tag-selected {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

.direction-add-container {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.direction-input {
  flex: 1;
  min-width: 150px;
}

.direction-add-btn {
  flex-shrink: 0;
  width: 80px;
}

/* 技术栈样式 */
.tech-stack-container {
  width: 100%;
}

.tech-prompt {
  color: #909399;
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.tech-tags-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.tech-tags-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tech-tag {
  flex: 1;
  min-width: 80px;
  max-width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  color: #606266;
  transition: all 0.3s ease;
  font-size: 14px;
  margin: 2px;
  text-align: center;
}

.tech-tag:hover {
  border-color: #c0c4cc;
  background-color: #f0f2f5;
}

.tech-tag-selected {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

.tech-add-container {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.tech-input {
  flex: 1;
  min-width: 150px;
}

.tech-add-btn {
  flex-shrink: 0;
  width: 80px;
}

/* 已选标签样式 */
.selected-tags-container {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px dashed #dcdfe6;
}

.selected-tags-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  font-weight: 500;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-tag {
  background-color: #409EFF;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .direction-tag {
    min-width: 70px;
    font-size: 12px;
  }
  
  .direction-add-container {
    flex-direction: column;
  }
  
  .direction-input {
    width: 100%;
  }
  
  .direction-add-btn {
    width: 100%;
  }
  
  .tech-tag {
    min-width: 70px;
    font-size: 12px;
  }
  
  .tech-add-container {
    flex-direction: column;
  }
  
  .tech-input {
    width: 100%;
  }
  
  .tech-add-btn {
    width: 100%;
  }
}

/* 其他样式保持不变 */
.slider-value {
  color: #409EFF;
  font-weight: bold;
  margin-bottom: 5px;
}

.slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
  margin-top: -10px;
}
.check-icon{
   display: flex;
    width: 100%;
    
}

.tech-tags {
  margin-bottom: 10px;
}

.tech-tags .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.tech-select {
  width: 100%;
  margin-bottom: 10px;
}

.custom-tech {
  display: flex;
  margin-top: 10px;
}

.custom-tech .el-input {
  margin-right: 10px;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.form-footer .el-button {
  margin-left: 10px;
}

.hours-text {
  margin-left: 10px;
  color: #606266;
}

.other-section {
  margin-top: 30px;
}

.subtitle {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.equal-height-cols {
  display: flex;
  align-items: stretch;
}

.equal-height-cols .el-card {
  height: 95%;
  display: flex;
  flex-direction: column;
}

.equal-height-cols .el-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.thank-you-modal {
  padding: 24px;
}

.modal-header {
  margin-bottom: 20px;
}

.modal-header h3 {
  font-size: 24px;
  color: #303133;
  margin: 0;
  font-weight: 600;
}

.modal-body {
  margin-bottom: 24px;
}

.message {
  font-size: 16px;
  color: #000000;
  margin: 0;
  line-height: 1.8;
}

.description {
  font-size: 16px;
  color: #000000;
  margin: 12px 0 0;
  font-weight: bold;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-footer .el-button {
  padding: 20px 10px;
  border-radius: 6px;
}

.modal-footer .el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
}

.modal-footer .el-button--default {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #606266;
}
</style>